import { useEffect, useState } from "react";
import { getVisualization } from "@/api/index";
import HorizontalBar from "@/components/HorizontalBar";
import RadrBar from "@/components/RadrBar";
import Relation from "@/components/Relation";
import TotalData from "@/components/TotalData";
import MapChart from "@/components/MapChart";
import VerticalBar from "@/components/VerticalBar";
import RingBar from "@/components/RingBar";
import WordCloud from "@/components/WordCloud";

const App: React.FC = () => {
  const [echartData, setechartData] = useState<echartDatatType>();

  useEffect(() => {
    //请求数据
    const fetchData = () => {
      getVisualization().then((res: any) => {
        setechartData(res);
      });
    };
    // fetchData();
    // 每间隔3秒获取新数据
    setInterval(() => {
      fetchData();
    }, 5000);
  }, []);

  // useEffect(() => {
  //   console.log(echartData);
  // }, [echartData]);

  return (
    <div className="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen p-5 text-white flex overflow-hidden">
      {/* 左边 */}
      <div className="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
        {/* 横向柱状图 */}
        {echartData && (
          <HorizontalBar
            HorizontalData={echartData?.regionData}
            class="h-1/3 box-border pb-4"
          />
        )}
        {/* 雷达图 */}
        {echartData && (
          <RadrBar
            class="h-1/3 box-border pb-4"
            RadrBarData={echartData?.riskData}
          />
        )}
        {/* 关系图 */}
        {echartData && (
          <Relation class="h-1/3" RelationData={echartData?.relationData} />
        )}
      </div>
      {/* 中间 */}
      <div className="w-1/2 mr-5 flex flex-col">
        {/* 数据总览图 */}
        {echartData && (
          <TotalData
            class="bg-opacity-50 bg-slate-800 p-3"
            TotalDataValue={echartData?.totalData}
          />
        )}
        {/* 地图可视化 */}
        {echartData && (
          <MapChart
            class="bg-opacity-50 bg-slate-800 p-3 mt-4 flex-1"
            MapChartData={echartData?.mapData}
          />
        )}
      </div>
      {/* 右边 */}
      <div className="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
        {/* 竖向柱状图 */}
        {echartData && (
          <VerticalBar
            class="h-1/3 box-border pb-4"
            VerticalBarData={echartData?.serverData}
          />
        )}
        {/* 环形图 */}
        {echartData && (
          <RingBar
            class="h-1/3 box-border pb-4"
            RingBarData={echartData?.abnormalData}
          />
        )}
        {/* 文档云图 */}
        {echartData && (
          <WordCloud class="h-1/3" WordCloudData={echartData?.wordCloudData} />
        )}
      </div>
    </div>
  );
};

export default App;
